<template>
  <div style="background-color: #fff;">
    <main-layout>
      <div v-show="!selectLandVis" class="plantFormBox">
        <template v-if="antoCreatePlan">
          <div class="formItem"  style="position:relative">
            <h5>基本信息</h5>
            <div class="myBtn" @click="close">
            <img src="/src/assets/back.png" alt="">
            返回
          </div>
            <div class="descriptions-box-save">
              <el-descriptions  :column="1">
                <el-descriptions-item label="作物类型：">{{formdata.cropName}}、{{formdata.cropSeriesName}}</el-descriptions-item>
                <el-descriptions-item label="亩产目标：">{{formdata.targetYield}} kg</el-descriptions-item>
                <el-descriptions-item label="耕种方式：">{{formdata.tillageWayName}}</el-descriptions-item>
                <el-descriptions-item label="再生稻管理：">{{formdata.isZaisheng?'是':'否'}}</el-descriptions-item>
                <el-descriptions-item label="种植地块：">{{formdata.farmLandName}}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="formItem itemtitle" style="position:relative">
            <h5>选择作物品种</h5>
            <div class="myBtn" @click="close">
            <img src="/src/assets/back.png" alt="">
            返回
          </div>
            <div class="inputItem">
              <div>
                <crop-select v-model="formdata.cropId" width="200px" :disabled="antoCreatePlan"
                  @change="(e) => { formdata.cropSeriesId = '';getWayList() }" @changeName="(e) => { formdata.cropName = e }" />
              </div>
              <div style="margin-left: 10px;">
                <crop-series-select 
                  v-model="formdata.cropSeriesId" 
                  :params="{
                    param1:formdata.cropId,
                    lovCode:'TANC_ALL_SERIES'
                    }"
                   placeholder="选择品种"
                   width="200px"
                  :disabled="antoCreatePlan" 
                  @changeName="(e) => { formdata.cropSeriesName = e }" />
              </div>
              <el-icon v-if="formdata.cropId && !antoCreatePlan" color="#48b27a" style="margin-left: 3px;cursor:pointer" :size="20"
                @click="btnAddBreed(formdata.cropId)">
                <CirclePlus />
              </el-icon>
            </div>
          </div>
          <div class="formItem itemtitle">
            <h5>亩产目标</h5>
            <div class="inputItem">
              <vxe-input v-model="formdata.targetYield" placeholder="输入平均每亩的产量目标" type="integer"
              @blur="blurTargetYield"
              style="width: 410px;"
              ></vxe-input>
              <div style="margin-left: 4px;">kg</div>
            </div>
            <div v-if="showRed && formdata.targetYield!=''" class="show-error">输入亩产目标不符合实际需求，请核实修改</div>
          </div>
          <div class="formItem itemtitle">  
            <h5>耕种方式</h5>
            <div class="inputItem" style="background-color:#fff;border:none;margin-bottom:20px;">
              <el-radio-group v-model="formdata.tillageWayId" :disabled="antoCreatePlan">
              <el-radio :label="item.code" v-for="item in tillageWayList">{{item.meaning}}</el-radio>
            </el-radio-group>
            </div>
          </div>
          <div class="formItem itemtitle" v-if="formdata.cropId==1">
            <h5>再生稻管理</h5>
          <div class="inputItem" style="background-color:#fff;border:none">
            <el-radio-group v-model="formdata.isZaisheng">
                     <el-radio :label="true">是</el-radio>
                     <el-radio :label="false">否</el-radio>
                  </el-radio-group>
          </div>
        </div>
      </template>

        <div v-loading="loading">
          <div v-for="(dt,mIndex) in stages" :key="dt.stageId" class="formItem">
            <h5>
              {{ dt.stageName }}
            </h5>
            <vxe-table
                  :border="true"
                  :min-height="80"
                  size="small"  
                  :data="dt.lineList||[]">
                  <vxe-column type="seq" width="60" title="序号" align="center"></vxe-column>
                  <vxe-column field="taskName" title="作业事项" width="10%"></vxe-column>
                  <!--点击添加地块-->
                  <vxe-column field="label" title="选择地块" width="10%">
                    <template #default="{row,rowIndex}">
                      <el-input v-model="row.farmLandName" 
                      placeholder="点击添加地块" 
                      suffix-icon="Operation" 
                      readonly
                      style="width: 100%;"
                      @click="openSelectDg(row,mIndex,rowIndex)" />
                    </template>
                  </vxe-column>
                  <vxe-column field="label" title="作业内容">
                    <template #default="{row}">
                         <el-input v-model="row.taskContent" 
                        placeholder="点击添加作业内容" 
                        type="textarea"
                        :rows="1"
                        :autosize="{minRows: 1, maxRows: 30}"
                        show-word-limit
                        maxlength="2000"
                        suffix-icon="Operation" 
                        style="width: 100%;"/>
                    </template>
                  </vxe-column>
                  <vxe-column field="label" title="预算费用(元)" width="10%">
                    <template #default="{row}">
                      <vxe-input v-model="row.budgetFee" style="width: 100%;" :min="0" step="1" type="float" @change="(e)=>{row.updateFlag=true}" ></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="label" title="负责人" width="15%">
                    <template #default="{row}">
                        <el-select 
                          v-model="row.fuzeUserIds" 
                          @change="(e)=>{row.updateFlag=true}" 
                          :multiple="true"
                          placeholder="选择负责人">
                            <el-option
                              v-for="item in userList"
                              :key="item.userId"
                              :label="item.realName"
                              :value="item.userId">
                            </el-option>
                      </el-select>
                    </template>
                  </vxe-column>
                  <vxe-column field="label" title="完成日期" width="21%">
                    <template #default="{row}">
                      <el-date-picker v-model="row.time" 
                            style="width:200px;"
                            type="daterange" 
                            @change="(e)=>{row.updateFlag=true}" 
                            start-placeholder="开始时间" 
                            range-separator="-"
                            end-placeholder="结束时间" 
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </template>
                  </vxe-column>
                  <vxe-column field="label" align="center" title="操作" width="5%" v-if="formdata.genMethod==1">
                    <template #default="{row,rowIndex}">
                      <template v-if="(row.taskName=='水管理'||row.taskName=='备耕') && !antoCreatePlan">
                        <vxe-button status="danger"
                         @click="delLineListItem(dt.lineList, rowIndex)"
                         circle icon="vxe-icon-delete"></vxe-button>
                      </template>
                    </template>
                  </vxe-column>
            </vxe-table>
            <template v-if="dt.stageId==1||dt.stageId==3">
              <template v-if="!dt.lineList.find((item)=>item.taskName=='备耕'||item.taskName=='水管理')">
                  <vxe-button 
                  style="margin-top:10px;"
                  @click="addList(dt.lineList,dt.stageId)"
                  status="primary" size="mini" icon="vxe-icon-add" circle></vxe-button>
                  <span style="font-size:15px;color: #04AE70;"> 新增 "{{dt.stageId==1?'备耕':'水管理'}}" 事项</span>
              </template>
          </template>
          </div>
      </div>
        <div class="cbjs">
          <span>种植面积：<b>{{totalMapAreaSize>0?totalMapAreaSize:formdata?.totalLandArea }}</b>亩</span>
          <span style="padding-left:100px">预算成本：<b>{{ totalCost }}</b>元</span>
        </div>
        <div style="padding: 20px 0 0 0; text-align:center">
          <el-button type="primary" @click="save">
            <el-icon color="#fff" :size="16">
              <circleCheck />
            </el-icon>
            提交</el-button>
        </div>
      </div>
      <!--地块选择组件-->
      <div  class="landMap" v-show="selectLandVis">
          <farm-land-select
            ref="refLandSelect"
            @change="changLandList"
            @onInitMap="changeMapWidth"
            @complete="getCompleteDataList"
            :plantingPlanId="plantHeaderId"
            :edit="plantHeaderId?true:false"
            :selectList ="mapBackData.selectLands"
            @close="closeMap"
        />
      </div>
      <vxe-modal v-model="dialogFlag"  
              :draggable="false"
              :title="dialogInfo.title" 
              :zIndex="-1" 
              :width="dialogInfo.width"
              :lock-scroll="false">
                <template #default>
                  <add-breed v-if="dialogInfo.type == 5" 
                    :stages-item="dialogInfo.options" 
                    @close="dialogFlag = false" 
                    @change="changeList" />
                </template>
        </vxe-modal>
    </main-layout>
  </div>
</template>

<script setup name="Plant-Plan-Add">
import { nextTick, ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  getStageList,
  addFarmPlant,
  getPlantDetail,
  getCropList,
  getDropdownList,
  editFarmPlant,
  getGenerate
} from '@/api/plant'

import {VXETable} from 'vxe-table'
import { useUserStore } from '@/pinia/modules/user'
import { emitter } from '@/utils/bus.js'
import mainLayout from '@/components/custom/mainLayout.vue'
import cropSelect from '@/components/custom/cropSelect.vue'
import cropSeriesSelect from '@/components/custom/cropSeriesSelect.vue'
import addBreed from './components/addBreed.vue'
import farmLandSelect from './select-land.vue'
import { message } from '@/utils/element'
const router = useRouter()
const route = useRouter()
const userStore = useUserStore()

const formdata = ref({isZaisheng:false})
const userList = ref([])
const stages = ref([]) // 种植阶段数据
const plantHeaderId = ref(null)
const landSelectData = ref([])
const tillageWayList = ref([])
const dialogFlag = ref(false)
const showRed = ref(false)
const loading = ref(true)
const saveType = ref(true)
const mapBackData = ref({})
const landDataList = ref([])
const eidtLandsList =ref([])
const maxIndex = ref(0)
const minIndex = ref(0)
const refLandSelect =ref(null)
const dialogInfo = ref({title: '标题',type: 1 })
const antoCreatePlan = ref(false) 
let mapWidthView = null
//获取模板数据
const getStagesTemplate = async() => {
    let res = await getGenerate({
      altitude:null,
      companyId:userStore.userInfo.companyId ,
      cropSeriesId:formdata.value.cropSeriesId,//6
      farmId:userStore.userInfo.farmId ,
      targetYield:formdata.value.targetYield,	
      tillageWayId:formdata.value.tillageWayId,
      isZaisheng:formdata.value.isZaisheng
  })

 if(res.success){
    formdata.value.companyId = userStore.userInfo.companyId 
    formdata.value.plantintModelLibId = res.data.plantintModelLibId
    let list = res.data.map((item)=>{
      item.lineList = item.tancModelStageTaskRspList.map((min)=>{
        let usersOBj= JSON.parse(min.fuzeUserJstr||'{}')
        min.taskFzuserRspList=usersOBj.fzuserLineRspList
        min.farmLandName = formdata.value.farmLandName
        min.selectLands = formdata.value.selectLands
        min.fuzeUserIds=min.taskFzuserRspList.map((m)=>m.userId+'')
        min.time=[min.taskStartTime,min.taskEndTime]
        return min
      })
      return item
    })
    stages.value =list
  }else{
    return message(res.message, 3)
  }
}

onMounted(async () => { 
  plantHeaderId.value = route.currentRoute.value.query.id||null
  formdata.value.genMethod= 1 //1 手动创建 2 自动创建
  formdata.value.plantintModelLibId= 1 //1 手动创建 2 自动创建
  getStageList({ 
    page: 1, 
    limit: 100,
    plantintModelLibId: (route.currentRoute.value.query.data &&route.currentRoute.value.query.data == 'template'?0:1)
  }).then(res => {
    if(res.success){
        loading.value = false
        if (route.currentRoute.value.query.data && route.currentRoute.value.query.data == 'template') {
          antoCreatePlan.value = true
          formdata.value = JSON.parse(sessionStorage.getItem('formdata'))
          getStagesTemplate()
        }else{
           stages.value =res.data.map((item)=>{
            item.lineList = item.tancStageTaskRspList
            return item
          })
        }
    }
  })

  eidtLandInfo()
  getUserList()
})
      //种植计划详情

const eidtLandInfo =()=>{
  // 编辑处理
  if (plantHeaderId.value) {
      loading.value = true
      getPlantDetail(plantHeaderId.value).then(async res => {
        if(res.success){
        formdata.value.targetYield = res.data.targetYield
        formdata.value.cropId = res.data.cropId + ''
        formdata.value.cropName = res.data.cropName
        formdata.value.cropSeriesId = res.data.cropSeriesId + ''
        formdata.value.number = res.data.number
        formdata.value.name = res.data.name

        formdata.value.plantDensity = res.data.plantDensity
        formdata.value.tillageWayId = res.data.tillageWayId+''
        formdata.value.plantDensityName = res.data.plantDensityMeaning
        formdata.value.tillageWayName = res.data.tillageWayMeaning
        formdata.value.cropSeriesName = res.data.cropSeriesName
        formdata.value.totalLandArea = res.data.totalLandArea
        formdata.value.genMethod= res.data.genMethod ||1 //1 手动创建 2 自动创建
        antoCreatePlan.value = (res.data.genMethod==2)
        formdata.value.farmLandName = `${res.data.totalLandCount}块地，${Number(res.data.totalLandArea||0).toFixed(2)}亩`
        // 回显阶段任务信息
          let listData =[]
          res.data?.tancStageRspList.forEach((dt,index)=>{
            let minlist =[]
            listData.push(dt) 
          let minDataList = dt.tancPlantingPlanTaskRspList ||[] 
              minDataList.forEach((item)=>{
                let landJson = JSON.parse(item.farmLandIdJstr||'{}')||{}
                let landInfo = `${item?.landCount||0}块地，${Number(item?.landArea||0).toFixed(2)}亩`
                // 处理负责人
                let userIds =JSON.parse(item?.fuzeUserJstr||'{}')?.fzuserLineRspList ||[] 
                eidtLandsList.value = Array.from(new Set(eidtLandsList.value.concat(landJson)))
                let obj = {
                  selectLands:landJson||[],
                  plantingPlanTaskId: item.plantingPlanTaskId,
                  plantingPlanId: item.plantingPlanId,
                  plantLineId: item.plantLineId,
                  stageTaskId: item.stageTaskId, // 事项（任务）id
                  taskName: item.taskName,
                  taskContent: item.taskContent, // 描述事项
                  budgetFee: item.budgetFee?.amount||0, // 预算费用
                  fuzeUserIds: userIds.map(ele => { return ele.userId+'' }), // 负责人id列表
                  time: [item.taskStartTime, item.taskEndTime], // 完成日期
                  taskStatus: item.taskStatus || '',
                  taskStatusMeaning: item.taskStatusMeaning,
                  reason: item.reason || '',
                  farmId: item.farmId,
                  farmLandName: landInfo
                }
                minlist.push(obj)
              })
              listData[index].lineList=minlist
            })
          //种植阶段数据
         window.setTimeout(() => {
            stages.value = listData
          }, 500);
          loading.value = false
          getWayList()

        }
      })
  }
}

const getUserList = async()=>{
    const res = await getDropdownList({ 
    page: 1, 
    limit: 20, 
    lovCode: 'TANC_APP_USER',
    param1: userStore.userInfo.farmId,
    param2: userStore.userInfo.companyId 
  })
   if(res.success){
      userList.value = res.data.map((item)=>{
      item.userId = item.code
      item.realName= item.meaning
      return item
    })
   }
}

const getWayList =async ()=>{
     const res3 = await getCropList({ page: 1, limit: 200,param1:formdata.value.cropId, lovCode: 'TANC_TILLAGE_WAY'})
      if(res3.success){
        tillageWayList.value = res3.data||[]
      }
}


//获取整地块列表数据
const getCompleteDataList =async(dataList)=>{
  landDataList.value = dataList
}

const blurTargetYield =(e)=>{
  if(formdata.value.targetYield>1000||formdata.value.targetYield<200){
    showRed.value = true
  }else{
    showRed.value = false
  }
}

const totalCost = ref(0)
totalCost.value = computed(() => {
  let total = 0
  for (let i = 0; i < stages.value.length; i++) {
    const item = stages.value[i]
    if (item.lineList) {
      for (let j = 0; j < item.lineList.length; j++) {
        const item2 = item.lineList[j]
        if (item2.budgetFee && !isNaN(item2.budgetFee)) {
          total += parseFloat(item2.budgetFee)
        }
      }
    }
  }
  return total
})

//获取种植面积
const totalMapAreaSize = computed(() => {
  let total = 0
  let listData = []
  stages.value.forEach((item, index) => {
    item?.lineList?.forEach((list) => {
      if (list.selectLands && list.selectLands.length > 0) {
        list.selectLands.forEach((min) => {
          listData.push(min)
        })
      }
    })
  })
  listData= Array.from(new Set(listData));
  landDataList.value?.forEach((item)=>{
    if(listData.includes(item.properties?.farmlandid)){
      total +=(item.properties?.mapareasize || 0)
    }
  })
  return Number(Number(total).toFixed(1))
})

const changeMapWidth=(map)=>{
  mapWidthView=map
}

const changeList = (cropId) => {
  formdata.value.cropId = ''
  setTimeout(() => {
    formdata.value.cropId = cropId
  }, 500)
}

const btnAddBreed = (cropId) => {
  dialogFlag.value = true
  dialogInfo.value.title = '添加品种'
  dialogInfo.value.type = 5
  dialogInfo.value.options = {
    cropId: cropId,
    farmId: userStore.userInfo.farmId,
  }
  dialogInfo.value.width = '500px'
}

const delLineListItem = (lineList,index)=>{
  lineList.splice(index,1)
}
const addList = (lineList,stageId)=>{

  if(stageId==1){
    lineList.splice(0, 0, {
        orderSeq:2,
        stageId: stageId,
        stageName: "耕",
        taskName: "备耕"
    });

  }else{
    lineList.splice(1, 0, {
        orderSeq:2,
        stageId: stageId,
        stageName: "管",
        taskName: "水管理"
    });
  }
}

//保存种植计算数据
const save = async () => {
  formdata.value.companyId = userStore.userInfo.companyId // 地块id列表
  landSelectData.value.forEach(item => {
    formdata.value.headerLandIdList.push(item.curLand.farmLandId)
  })
  if (!formdata.value.targetYield) {
    return message('请输入每亩目标产量', 3)
  }else if (formdata.value.targetYield<200||formdata.value.targetYield>1000) {
    return message('输入亩产目标不符合实际需求，请核实修改', 3)
  } else if (!formdata.value.cropId) {
    return message('请选择作物', 3)
  } else if (!formdata.value.cropSeriesId) {
    return message('请选择作物品种', 3)
  }  else if (!formdata.value.tillageWayId) {
    return message('请选择耕种方式', 3)
  }
     
  // 组装参数
  const objlist = []
  //种植方案数据
  stages.value.forEach((item, index) => {
    item.lineList.forEach((list) => {
        objlist.push({
          budgetFee: list.budgetFee,
          orderSeq: list.orderSeq,
          companyId: userStore.userInfo.companyId,
          plantingPlanTaskId: list.plantingPlanTaskId,
          plantingPlanId: list.plantingPlanId,
          farmId: userStore.userInfo.farmId,
          taskFzuserAddReqList: list.fuzeUserIds?.map(min => min),  
          taskLandAddReqList: list.selectLands?.map(min => min.farmLandId || min),
          reason: list.reason || '',
          stageId: item.stageId, // 种植阶段id
          stageName: item.stageName, // 种植阶段id
          stageTaskId: list.stageTaskId, // 任务id
          taskName: list.taskName,
          taskContent: list.taskContent,
          taskEndTime: list.time?list.time[1]:'',
          taskStartTime: list.time?list.time[0]:'',
          taskStatus: list.taskStatus || ''
        })
    })
  })
  if (plantHeaderId.value) { // 编辑
    formdata.value.taskUpdateReqList = []
    formdata.value.taskUpdateReqList = objlist
  } else {
    formdata.value.taskAddReqList = []

    formdata.value.taskAddReqList = objlist
  }
  if (!objlist || objlist.length < 1) {
    return message('至少填写一项农事任务', 3)
  }

  let res = {}
  formdata.value.farmId = userStore.userInfo.farmId
  if(saveType.value){
      saveType.value =false
      VXETable.modal.message({content: '正在提交数据',mask:true,top:innerHeight/2,duration:-1, id:'loading-save', status: 'loading'})
      if (plantHeaderId.value) { // 编辑
        formdata.value.plantingPlanId = plantHeaderId.value
        res = await editFarmPlant(formdata.value)
      } else {
        res = await addFarmPlant({...formdata.value,...{selectLands:null}})
      }
      if (res.success) {
        VXETable.modal.close('loading-save')
        message('数据提交成功', 2)
        close() // 关闭当前页
        emitter.emit('reload') // 刷新页面
        saveType.value =true
      } else {
        saveType.value =true
        VXETable.modal.close('loading-save')
        message(res.message || '数据提交失败', 3)
      }
    }
}


const selectLandVis = ref(false)

//打开地块选择对话框
const openSelectDg = (row,mIndex,index) => {
  maxIndex.value = mIndex
  minIndex.value = index
  selectLandVis.value = true
  window.setTimeout(() => {
    mapBackData.value.selectLands =row?.selectLands ||[]
  }, 100);
  window.setTimeout(() => {
    mapWidthView.resize()
  },30);
}


const closeMap=()=>{
  selectLandVis.value = false
  mapBackData.value.selectLands=[]
}

//地块列表变化
const changLandList =({selects,total})=>{
    stages.value[maxIndex.value].lineList[minIndex.value].selectLands =selects||[]
    if(total>0){
      stages.value[maxIndex.value].lineList[minIndex.value].farmLandName =`${selects.length}块地,${total}亩`
    }else{
      stages.value[maxIndex.value].lineList[minIndex.value].farmLandName =''
    }
}


const close = () => {
  router.push(`/manage/plan/list`)
}

</script>
<style>
.descriptions-box-save {
  margin: 10px 0 20px 0;
  background-color: #f7f7f7;
  padding: 10px 20px;
  border: 1px solid #eee;
}

.descriptions-box-save table {
  background-color: #f7f7f7;
}

.descriptions-box-save table .el-descriptions__label {
  font-weight: 500;
  position: relative;
  font-size: 14px;
  text-indent: 10px;
  margin-right: 2px;
}
</style>

<style lang="scss">
.landMap {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 100px);
  overflow: hidden;
  width: 100%;
  margin:0;
}

.show-error{
  padding: 10px;
  color: red;
  font-size: 13px;
}
.plantFormBox {
  margin: -20px 0 0 -10px;

  .formItem {
    &+.formItem {
      margin-top: 20px;
    }

    .btnadd {
      display: flex;
      align-items: center;
      padding: 6px 10px;
      background-color: #E5F7F0;
      font-size: 14px;
      color: #04AE70;
      cursor: pointer;
      border-radius: 2px;
      margin-left: 30px;
      position: relative;
    }

    h5 {
      display: flex;
      font-size: 16px;
      align-items: center;
      height: 26px;
      color: #333;
      margin: 0 0 10px 0;
      padding: 0;
      text-indent: 4px;
      padding: 0 0 8px 0;
      border-bottom: 1px solid #ededed;

      &::before {
        content: '';
        display: block;
        width: 3px;
        background: #FF9C00;
        height: 16px;
        margin: 0 3px 0 0;
      }
      
      .btnadd::after {
        content: "";
        display: block;
        width: 1px;
        background: #ddd;
        height: 20px;
        margin: 0 3px 0 0;
        position: absolute;
        left: -15px;
      }

      span {
        font-weight: normal;
      }
    }

    .inputItem {
      display: flex;
      align-items: center;
      margin: 5px 0 0 0;
      padding: 6px;
      background-color: #f7f7f7;
      border: 1px solid #eee;

      .lable {
        flex-shrink: 0;

        span {
          color: #f70808;
        }
      }
    }
  }

  .itemtitle {
    h5 {
      &::after {
        content: "";
        display: none;
      }
    }
  }

  .cbjs {
    padding: 15px;
    background-color: #00AF7010;
    margin-top: 10px;
    color: #666;

    b {
      font-size: 18px;
      color: #FF9C00;
      margin-right: 4px;
    }
  }
}
</style>

<style lang="scss">
.plantFormBox {
  .el-input__inner {
    font-size: 12px !important;
  }

  .mydaterange {
    width: 232px; //330px;

    input {
      font-size: 12px !important;
    }
  }

  .el-input--suffix {
    i {
      color: #999 !important;
    }
  }
}
.myBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    right:0;
    top: 0;
    height: 100%;
    color:#333;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    padding: 0;
    box-sizing: border-box;
    height: 30px;
    width: 80px;
    border-radius: 2px;
    border: 1px solid #DDDDDD;
    &.comfirmBtn{
      right:100px;
      background-color: #04AE70;
      color: #fff;
      border: 1px solid #04AE70;
      &:hover{
        cursor: pointer;
        background-color: #049a63;
        color: #fff;
      }
    }
    &:hover{
      cursor: pointer;
      background-color: #00AF7010;
      color: #25B983;
    }
    img{
      display: block;
      height: 14px;
      margin: 0 10px 0 0;
    }
    &+.myBtn{
      margin-left: 10px;
    }
  }
  .btn-map{
    .el-input__inner{
      cursor: pointer;
    }
  }
</style>
